<template>
  <el-dialog v-model="visible" :title="`${paramsProps.title}`" :destroy-on-close="true" width="580px" draggable>
    <el-form
      ref="ruleFormRef"
      label-width="200px"
      label-suffix=" :"
      :rules="rules"
      :model="formData"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="车辆编号" prop="vehicleNumber">
        <el-input v-model="formData.vehicleNumber" placeholder="请填写车辆编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="ICCID" prop="iccid">
        <el-input v-model="formData.iccid" placeholder="请填写ICCID" clearable></el-input>
      </el-form-item>
      <el-form-item label="SIM卡号" prop="simNumber">
        <el-input v-model="formData.simNumber" placeholder="请填写SIM卡号" clearable></el-input>
      </el-form-item>
      <el-form-item label="LEDID" prop="ledid">
        <el-input v-model="formData.ledid" placeholder="请填写LEDID" clearable></el-input>
      </el-form-item>
      <el-form-item label="过期时间" prop="expireTime">
        <el-date-picker
          clearable
          v-model="formData.expireTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择过期时间"
        >
        </el-date-picker>
      </el-form-item>
      <!-- 新增字段 -->
      <el-form-item label="容量(单位：m³)" prop="capacity">
        <el-input v-model="formData.capacity" placeholder="请输入容量" clearable></el-input>
      </el-form-item>
      <el-form-item label="起点有效速度(km/h)" prop="tspeed">
        <el-input-number v-model="formData.tspeed" placeholder="请输入最低速度" :min="1" :step="0.1" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="起始振动时间区域(s)" prop="ttimeZone">
        <el-input-number v-model="formData.ttimeZone" placeholder="请输入起始振动时间区域" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="震动次数" prop="ttimes">
        <el-input-number v-model="formData.ttimes" placeholder="请输入震动次数" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="终点雷达距离(mm)" prop="tradarDistance">
        <el-input-number v-model="formData.tradarDistance" placeholder="请输入终点雷达距离" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="终点雷达时间区域(s)" prop="tradarTime">
        <el-input-number v-model="formData.tradarTime" placeholder="请输入终点雷达时间区域" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="运输有效里程(m)" prop="tseMinDistance">
        <el-input-number v-model="formData.tseMinDistance" placeholder="请输入运输有效里程" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="起点终点有效运输时长(s)" prop="tseMinTime">
        <el-input-number v-model="formData.tseMinTime" placeholder="请输入起点终点有效运输时长" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
      <!-- <el-form-item label="起点终点有效运输里程(m)" prop="tseTransportDistance">
        <el-input-number v-model="formData.tseTransportDistance" placeholder="请输入起点终点有效运输里程" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item> -->
      <el-form-item label="终点到新起点长度" prop="tesMinDistance">
        <el-input-number v-model="formData.tesMinDistance" placeholder="请输入终点到新起点长度" :min="0" controls-position="right" style="width: 100%"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { type ElForm, ElMessage } from 'element-plus';

defineOptions({
  name: 'DtuFtpInfoForm'
});

const rules = reactive({
  vehicleNumber: [{ required: false, message: '请填写车辆编号' }],
  iccid: [{ required: false, message: '请填写ICCID' }],
  simNumber: [{ required: false, message: '请填写SIM卡号' }],
  ledid: [{ required: false, message: '请填写LEDID' }],
  expireTime: [{ required: false, message: '请选择过期时间' }],
  // 新增字段规则
  capacity: [{ required: false, message: '请输入容量' }],
  tspeed: [{ required: false, message: '请输入起始最低速度' }],
  ttimeZone: [{ required: false, message: '请输入起始振动时间区域' }],
  ttimes: [{ required: false, message: '请输入震动次数' }],
  tradarDistance: [{ required: false, message: '请输入终点雷达距离' }],
  tradarTime: [{ required: false, message: '请输入终点雷达时间区域' }],
  tseMinDistance: [{ required: false, message: '请输入起点终点有效里程' }],
  tseMinTime: [{ required: false, message: '请输入起点终点有效运输时长' }],
  tseTransportDistance: [{ required: false, message: '请输入起点终点有效运输里程' }],
  tesMinDistance: [{ required: false, message: '请输入终点到新起点长度' }]
});

const visible = ref(false);
const formData = ref({
  id: 0,
  vehicleNumber: '',
  iccid: '',
  simNumber: '', // 新增字段
  ledid: '',
  expireTime: '',
  tesMinDistance: undefined, // 新增字段
  // 新增字段 (根据API示例调整字段名)
  capacity: '',
  tspeed: undefined,
  ttimeZone: undefined,
  ttimes: undefined,
  tradarDistance: undefined,
  tradarTime: undefined,
  tseMinDistance: undefined,
  tseMinTime: undefined,
  tseTransportDistance: undefined
});

const paramsProps = ref<{
  title: string;
  row: any;
  api: Function | undefined;
  getTableList: Function | undefined;
}>({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined
});

// 监听row数据变化，更新表单
watch(
  () => paramsProps.value.row,
  (newVal) => {
    if (newVal) {
      formData.value = {
        id: newVal.id || 0,
        vehicleNumber: newVal.vehicleNumber || '',
        iccid: newVal.iccid || '',
        simNumber: newVal.simNumber || '', // 新增字段
        ledid: newVal.ledid || '',
        expireTime: newVal.expireTime || '',
        tesMinDistance: newVal.tesMinDistance !== undefined ? newVal.tesMinDistance : undefined, // 新增字段
        // 新增字段 (根据API示例调整字段名)
        capacity: newVal.capacity !== undefined ? newVal.capacity : '',
        tspeed: newVal.tspeed !== undefined ? newVal.tspeed : undefined,
        ttimeZone: newVal.ttimeZone !== undefined ? newVal.ttimeZone : undefined,
        ttimes: newVal.ttimes !== undefined ? newVal.ttimes : undefined,
        tradarDistance: newVal.tradarDistance !== undefined ? newVal.tradarDistance : undefined,
        tradarTime: newVal.tradarTime !== undefined ? newVal.tradarTime : undefined,
        tseMinDistance: newVal.tseMinDistance !== undefined ? newVal.tseMinDistance : undefined,
        tseMinTime: newVal.tseMinTime !== undefined ? newVal.tseMinTime : undefined,
        tseTransportDistance: newVal.tseTransportDistance !== undefined ? newVal.tseTransportDistance : undefined
      };
    }
  },
  { deep: true }
);

// 接收父组件传过来的参数
const acceptParams = (params: any) => {
  paramsProps.value = params;
  visible.value = true;
};

// 提交数据（编辑）
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return;
    try {
      const submitData = {
        id: formData.value.id,
        vehicleNumber: formData.value.vehicleNumber,
        iccid: formData.value.iccid,
        simNumber: formData.value.simNumber, // 新增字段
        ledid: formData.value.ledid,
        expireTime: formData.value.expireTime,
        tesMinDistance: formData.value.tesMinDistance, // 新增字段
        // 新增字段 (根据API示例调整字段名)
        capacity: formData.value.capacity,
        tspeed: formData.value.tspeed,
        ttimeZone: formData.value.ttimeZone,
        ttimes: formData.value.ttimes,
        tradarDistance: formData.value.tradarDistance,
        tradarTime: formData.value.tradarTime,
        tseMinDistance: formData.value.tseMinDistance,
        tseMinTime: formData.value.tseMinTime,
        tseTransportDistance: formData.value.tseTransportDistance
      };
      await paramsProps.value.api!(submitData);
      ElMessage.success({ message: `${paramsProps.value.title}成功！` });
      paramsProps.value.getTableList!();
      visible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>

<style scoped lang="scss"></style>